/* eslint-disable no-unused-expressions */
/* eslint-disable @typescript-eslint/ban-ts-comment */
import { createComponent } from '@mpxjs/core'
import { CDN_HOST } from '../../config'
createComponent({
  data: {
    loaded: false,
    arReady: false,
    CDN_HOST
    // timeStamp: 0,
    // isChange: false
  },
  methods: {
    handleReady({ detail }) {
      const xrScene = (this.scene = detail.value)
      // xrScene.event.add('tick', this.handleTick.bind(this, 500))
      console.log('xr-scene', xrScene)
    },
    handleAssetsProgress: function ({ detail }) {
      console.log('assets progress', detail.value)
    },
    handleAssetsLoaded: function ({ detail }) {
      console.log('assets loaded', detail.value)
      this.setData({ loaded: true })
    },
    handleARReady: function ({ detail }) {
      console.log('arReady')
      this.setData({ arReady: true })
    },
    handleGLTFLoaded(e) {
      console.log(e)
    },
    handleTick: function (time) {
      // if (time.timeStamp - this.timeStamp < 3000) {
      //   if (this.isChange) {
      //     this.setData({
      //       isChange: false
      //     })
      //   }
      //   return
      // }
      // if (!this.isChange) {
      //   this.timeStamp = time.timeStamp
      //   this.setData({
      //     isChange: true
      //   })
      // }
      const xrSystem = wx.getXrFrameSystem()
      const trackerEl = this.scene.getElementById('tracker')
      if (!trackerEl) {
        return
      }

      const tracker = trackerEl.getComponent(xrSystem.ARTracker)
      if (!tracker.arActive) {
        return
      }

      // 这里只是例子，实际上用的是`ARTracker`的`autoSync`属性。
      // 但也是一个更高自由度的选项。
      // 视情况需要自己同步`tracker`的`scale`和`rotation`特定节点。
      // 第一个参数是特征点编好，第二个是可选的复用结果，第三个是可选的是否相对于`ARTracker`。
      // 为`false`为世界空间的位置，需要配合`scale`自己使用
      // 获取总体置信度
      const score = tracker.score

      this.triggerEvent('info', { score })
      this.createAr()
    },
    createAr() {
      const xrSystem = wx.getXrFrameSystem()
      const trackerEl = this.scene.getElementById('tracker')
      if (!trackerEl) {
        return
      }

      const tracker = trackerEl.getComponent(xrSystem.ARTracker)
      // 这里只是例子，实际上用的是`ARTracker`的`autoSync`属性。
      // 但也是一个更高自由度的选项。
      // 视情况需要自己同步`tracker`的`scale`和`rotation`特定节点。
      // 第一个参数是特征点编好，第二个是可选的复用结果，第三个是可选的是否相对于`ARTracker`。
      // 为`false`为世界空间的位置，需要配合`scale`自己使用
      const zero = tracker.getPosition(0, new xrSystem.Vector3(), true)
      const three = tracker.getPosition(3, new xrSystem.Vector3(), true)
      const four = tracker.getPosition(4, new xrSystem.Vector3(), true)
      const five = tracker.getPosition(5, new xrSystem.Vector3(), true)
      const six = tracker.getPosition(6, new xrSystem.Vector3(), true)
      const seven = tracker.getPosition(7, new xrSystem.Vector3(), true)
      const eight = tracker.getPosition(8, new xrSystem.Vector3(), true)
      const nine = tracker.getPosition(9, new xrSystem.Vector3(), true)
      const ten = tracker.getPosition(10, new xrSystem.Vector3(), true)
      const eleven = tracker.getPosition(11, new xrSystem.Vector3(), true)
      const twelve = tracker.getPosition(12, new xrSystem.Vector3(), true)
      const thirteen = tracker.getPosition(13, new xrSystem.Vector3(), true)
      const fourteen = tracker.getPosition(14, new xrSystem.Vector3(), true)
      const fifteen = tracker.getPosition(15, new xrSystem.Vector3(), true)
      const sixteen = tracker.getPosition(16, new xrSystem.Vector3(), true)
      // 右小臂
      // console.log(eight, ten)
      this.createCylinder(eight, ten, 'youxiaobi', 0.18)
      // 右大臂
      this.createCylinder(six, eight, 'youdabi', 0.18, 0.06)
      // // 左小臂
      this.createCylinder(five, seven, 'zuoxiaobi', 0.18, 0.08)
      // // 左大臂
      this.createCylinder(seven, nine, 'zuodabi', 0.18)
      // // 右大腿
      this.createCylinder(twelve, fourteen, 'youdatui', 0.25)
      // // 右小腿
      this.createCylinder(fourteen, sixteen, 'youxiaotui', 0.2)
      // // 左大腿
      this.createCylinder(eleven, thirteen, 'zuodatui', 0.25)
      // // 左小腿
      this.createCylinder(thirteen, fifteen, 'zuoxiaotui', 0.2)
      // const score = tracker.score;
      // this.triggerEvent('info', { score });

      this.createBody(five, six, eleven, twelve, zero)
      this.createHead(three, four)
    },
    createCylinder(topCenter, bottomCenter, nodeId, scale, y?) {
      const xrSystem = wx.getXrFrameSystem()
      let height = topCenter.distanceTo(bottomCenter)
      if (y) {
        height += y
      }
      const direction = topCenter.sub(bottomCenter).normalize()
      const cylinder = this.scene.getNodeById(nodeId)
      // @ts-ignore
      const scaleVector = xrSystem.Vector3.createFromNumber(
        scale,
        height * 0.5,
        scale
      )
      cylinder.scale.set(scaleVector)

      // 把位置赋予另外一个物体
      const px = (topCenter.x + bottomCenter.x) / 2
      const py = y
        ? (topCenter.y + y / 2 + bottomCenter.y) / 2
        : (topCenter.y + bottomCenter.y) / 2
      const pz = (topCenter.z + bottomCenter.z) / 2
      // @ts-ignore
      const position = xrSystem.Vector3.createFromNumber(px, py, pz)
      cylinder.position.set(position)
      // @ts-ignore
      const axis = xrSystem.Vector3.createFromNumber(0, 1, 0)
        .cross(direction)
        .normalize()
      const angle = Math.acos(direction.y)
      const rx = axis.x * angle
      const ry = axis.y * angle
      const rz = axis.z * angle
      // @ts-ignore
      const rotation = xrSystem.Vector3.createFromNumber(rx, ry, rz)
      cylinder.rotation.set(rotation)
    },
    createBody(topLeft, topRight, bottomLeft, bottomRight, head) {
      const topx = (topLeft.x + topRight.x) / 2
      // const topy = (topLeft.y + topRight.y) / 2
      const topz = (topLeft.z + topRight.z) / 2
      // const topx = head.x
      const topy = head.y - 0.05
      // const topz = head.z

      const bottomx = (bottomLeft.x + bottomRight.x) / 2
      const bottomy = (bottomLeft.y + bottomRight.y) / 2
      const bottomz = (bottomLeft.z + bottomRight.z) / 2

      const xrSystem = wx.getXrFrameSystem()
      // @ts-ignore
      const topCenter = xrSystem.Vector3.createFromNumber(topx, topy, topz)
      // @ts-ignore
      const bottomCenter = xrSystem.Vector3.createFromNumber(
        bottomx,
        bottomy,
        bottomz
      )
      this.createCylinder(topCenter, bottomCenter, 'body', 0.4)
    },
    createHead(left, right) {
      const xrSystem = wx.getXrFrameSystem()

      const x = (left.x + right.x) / 2
      const y = (left.y + right.y) / 2
      const z = (left.z + right.z) / 2
      // @ts-ignore
      const center = xrSystem.Vector3.createFromNumber(x, y, z)
      const headNode = this.scene.getNodeById('head')
      headNode.position.set(center)
      // headNode.scale.set(left.x - right.x)
    },
    async onShare() {
      // 截取配置，可选`type`为`jpg`或`png`，在为`jpg`时，可配置`0~1`的`quality`
      // 以下是默认值
      const options = {
        type: 'jpg',
        quality: 0.8
      }
      //   return new Promise((resolve) => {
      //     this.scene.share.captureToLocalPath(options, (fp) => {
      //       resolve(fp)
      //     })
      //   })
      const base64 = await this.scene.share.captureToDataURLAsync(options)
      return base64
    }
  }
})
